import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Button, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';

import styles from './index.css';
import IconfontStyle from '../../assets/iconfont/iconfont.css';

const PHONE_REG = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 

class SignIn extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        }
    }

	onLogin() {
		const { dispatch } = this.props
		let values = this.props.form.getFieldsValue()

    	values.mobile = values.mobile && values.mobile.replace(/\s/g, '')

    	if(!values.mobile) {
    		Toast.info('请输入手机号码!', 1)
    		return false
    	}
    	if(!PHONE_REG.test(values.mobile)) {
    		Toast.info('手机号码格式不正确!', 1)
    		return false
    	}
    	if(!values.password) {
    		Toast.info('请输入密码', 1)
    		return false
    	}
		dispatch({
	      type: 'meyley/login',
	      payload: values
	    });
	}
	render() {
		const { getFieldProps } = this.props.form
	 	return (
	 		<div className={`${styles['login-body']} login-body`}>
	 			<div className={styles['login-body-img']}>
	 				<img style={{width: '1.40rem', height: '1.40rem'}} src={require('../../assets/login-avatar.png')} />
	 			</div>
	 			<div className={styles['login-body-input']}>
	 				<div className={styles['login-body-input-wrap']}>
					     <InputItem
					        {...getFieldProps('mobile')}
					        clear
					        type="phone"
					        className='login-body-input-item'
					        placeholder="请填写您的手机号"
					        >
					      	<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-phone']}`} style={{'fontSize': '0.40rem'}}/>
					      	<span className={styles['login-body-split']}></span>
					     </InputItem>
					     <InputItem
					        {...getFieldProps('password')}
					        clear
					        type="password"
					        className='login-body-input-item'
					        placeholder="请输入密码"
					        >
					      	<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-lock']}`} style={{'fontSize': '0.40rem'}}/>
					      	<span className={styles['login-body-split']}></span>
					     </InputItem>
				     </div>
			     	<Button className={`${styles['login-body-submit']} meyley-button-red`} onClick={this.onLogin}><span style={{color: '#fff'}}>登录</span></Button>
			     </div>
			</div>
	  	);
	}
};

SignIn.propTypes = {
};

export default createForm()(SignIn)
